<!--王羊-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>精品美食</title>
    <link rel="stylesheet" href="css/register.css">
    <link rel="shortcut icon" type="img/x-icon" href="img/logo.jpg">
    <script src="js/jquery-1.8.3.js" type="text/javascript"></script>
</head>
<script>
    $(function () {
        //点击发送验证码按钮后  该按失效
        $("#y").click(function () {
            sendCode($("#y"));
            var code = $("#y");
            /*console.log(code.attr("disabled"));*/
            if (code.attr("disabled")!="disabled") {
                code.attr("disabled", true);
                setTimeout(function () {
                    //发送验证码按钮 改变透明度
                    code.css("opacity", "0.7");
                    //一秒后触发改变透明度的函数
                }, 1000)
                var time = 60;
                var set = setInterval(function () {
                    //倒计时
                    code.val(+--time + "s后再点我");
                }, 1000);
                setTimeout(function () {
                    //60秒后发送验证码按钮重新生效
                    code.attr("disabled", false).val("重新获取验证码").css("opacity", "1");
                    clearInterval(set);
                }, 60000);


            }
    });


        /*$("#y").attr("disabled", false);*/
        // code.attr("disabled",false);
    })

    function sendCode() {
        var phonenum = $("#tel").val();
        var result = isPhoneNum();
        if (result) {
            doPostBack('Duanxinyanzheng', CountDown, {"phonenum": phonenum});
        }
    }

    //将手机利用ajax提交到后台的发短信接口
    function doPostBack() {
        $.ajax({
            type: 'POST',
            url: "Duanxinyanzheng",// 请求的action路径
            data: {"tel": $("#tel").val()},
            dataType: 'json',
            error: function () {// 请求失败处理函数
            },
            success: function backFunc() {

            }
        });

    }



    var wait = 60;
    $(function () {
        // var logNum = Math.floor(Math.random() * 60 + 1);
        // function time(o) {
        //     if (wait == 0) {
        //         o.removeAttribute("disabled");
        //         o.value = "再次免费获取验证码";
        //         wait = 60;
        //     } else {
        //         o.setAttribute("disabled",false);
        //         o.value = "重新发送(" + wait + ")";
        //         if (wait == logNum) {
        //             o.removeAttribute("disabled");
        //             resend();
        //         }
        //         wait;
        //         setTimeout(function () {
        //             time(o, wait);
        //         }, 1000);
        //     }
        // }
        $("#y").click(function () {
            time(this);
        })

    })


    var maxtime = 60;

    function CountDown() {
        if (maxtime >= 0) {
            /*$("#y").setAttribute("disabled", "disabled");*/
            seconds = Math.floor(maxtime % 60);
            msg = "重新发送(" + seconds + ")";
            $("#y").html("msg");
            document.all["btn"].value = msg;
            maxtime;
        } else {
            clearInterval(timer);
            msg = "重新发送";
            document.getElementById("y").value = msg;
            document.getElementById("y").removeAttribute("disabled");
        }
    }

    timer = setInterval("CountDown()", 1000);


    function isPhoneNum() {
        var phonenum = $("#tel").val();
        var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/;
        if (!myreg.test(phonenum)) {
            $("#y").attr("disabled", true);
            alert('请输入有效的手机号码！');

            return false;
        } else {
            return true;
        }
    }

    $(function () {
        $("#tel").blur(function () {
            $.post(
                "SearchUserByTelServlet", {
                    tel: $("#tel").val()
                },
                function (data) {
                    if (data == "true") {
                        $("#msg").html("该手机号已经注册").css("color", "red");
                        $("#y").attr("disabled", true).css("opacity", "0.7");

                    } else if (data == "false") {
                        $("#msg").html("");
                        $("#y").attr("disabled", false);
                        $("#y").css("opacity", "1");
                    }else if (data=="kong"){
                    $("#msg").html("要输手机号地！ 老铁").css("color", "red");
                    $("#y").attr("disabled", true).css("opacity", "0.7");
                }
                }
            );
        });

    })

    $(function () {
        $("#account").blur(function () {
            $.post(
                "SearchUserByAccountServlet", {
                    account: $("#account").val()
                },
                function (data) {
                    if (data == "true") {
                        $("#msg1").html("该昵称已存在").css("color", "red");
                        $("#y").attr("disabled", true).css("opacity", "0.7");
                    } else if (data == "false"){
                        $("#msg1").html("").css("color", "green");
                        $("#y").attr("disabled", false);
                        $("#y").css("opacity", "1");
                    }else {
                        $("#msg1").html("闹着玩呢 昵称都不写").css("color", "red");
                        $("#y").attr("disabled", true).css("opacity", "0.7");
                    }

                }
            );
        });

    })

    $(function () {
        $("#repassword").blur(function () {
            $.post(
                "SearchUserByRepasswordServlet", {
                    password: $("#password").val(),
                    repassword: $("#repassword").val()
                },
                function (data) {
                    if (data == "false") {
                        $("#msg2").html("两次密码不一致").css("color", "red");
                        $("#y").attr("disabled", true).css("opacity", "0.7");
                    } else if (data == "true"){
                        $("#msg2").html("").css("color", "green");
                        $("#y").attr("disabled", false);
                        $("#y").css("opacity", "1");
                    }else if (data=="kong") {
                        $("#msg2").html("先输密码吧老铁").css("color", "red");
                        $("#y").attr("disabled", true).css("opacity", "0.7");
                    }

                }
            );
        });

    })

    $(function () {
        $("#password").blur(function () {
            $.post(
                "SearchUserByPasswordServlet", {
                    password: $("#password").val(),

                },
                function (data) {
                    if (data == "false") {
                        $("#msg6").html("别闹！输密码").css("color", "red");
                        $("#y").attr("disabled", true).css("opacity", "0.7");
                    } else if (data == "true"){
                        $("#msg6").html("").css("color", "green");
                        $("#y").attr("disabled", false);
                        $("#y").css("opacity", "1");
                    }

                }
            );
        });

    })


</script>
<body>
<div class="nav">
    <div class="nav-content">
        <!--<img src="img/logo.jpg"/>-->
        <p>欢迎注册</p>
        <p class="register"><a href="login.html">我已经注册，马上登录&gt;</a></p>
    </div>
</div>
<div class="content">
    <div class="container">
        <form action="UserAccountServletZC" method="post"
              style="width: 700px;margin:50px 100px 50px auto;text-align: left;">
            <table>
                <tr>
                    <td>
                        手机号码：
                    </td>
                    <td>
                        <input type="text" id="tel" name="tel" placeholder="请输入手机号" required>
                    </td>
                    <td>
                        <span id="msg"></span>
                    </td>
                </tr>
                <tr>
                    <td>
                        设置账号：
                    </td>
                    <td>
                        <input type="text" id="account" name="account" placeholder="请输入账号" required>
                    </td>
                    <td>
                        <span id="msg1"></span><br>
                    </td>
                </tr>
                <tr>
                    <td>
                        设置密码：
                    </td>
                    <td>
                        <input type="password" id="password" name="password" placeholder="请输入密码" required>
                    </td>
                    <td>
                        <span id="msg6"></span>
                    </td>
                </tr>
                <tr>
                    <td>
                        确认密码：
                    </td>
                    <td>
                        <input type="password" id="repassword" name="repassword" placeholder="确认密码" required>
                    </td>
                    <td>
                        <span id="msg2"></span>
                    </td>
                </tr>
                <tr>
                    <td>
                        短信验证码：
                    </td>
                    <td>
                        <input type="text" name="yan" id="yan" placeholder="短信验证码" required>
                    </td>
                    <td>

                    </td>
                </tr>
            </table>
            <input name="y" id="y" type="button" value="发送验证码" class="login">
            <input type="submit" value="提交注册" class="login">

        </form>

    </div>
</div>
<div class="foot">
    <div class="footer">
        <div class="footer-bg">

            <div class="footer-border">
            </div>
            <div class="footer-list">
                <div>服务保障</div>
                <ul>
                    <li>正品保障</li>
                    <li>7天无理由退换货</li>
                    <li>退货返运费</li>
                    <li>7X15小时客户服务</li>
                </ul>
            </div>
            <div class="footer-list">
                <div>支付方式</div>
                <ul>
                    <li>公司转账</li>
                    <li>货到付款</li>
                    <li>在线支付</li>
                    <li>分期付款</li>
                </ul>
            </div>
            <div class="footer-list">
                <div>商家服务</div>
                <ul>
                    <li>配送中心</li>
                    <li>广告服务</li>
                    <li>服务市场</li>
                </ul>
            </div>
            <div class="footer-list">
                <div>服务保障</div>
                <ul>
                    <li>免运费</li>
                    <li>海外配送</li>
                    <li>EMS</li>
                    <li>211限时达</li>
                </ul>
            </div>
            <div class="copyright">
                Copyright&copy;1996-2018Fresh.All Rights Reserved.
            </div>
        </div>
    </div>
</div>
</body>
</html>
